<template>
	<view class="AccountPassword">
		<view class="main">
			<view class="account">
				<text>账号：</text>
				<input type="text" placeholder="请输入账号" v-model="userName">
			</view>
			<Lines></Lines>
			<view class="password">
				<text>密码：</text>
				<input type="text" placeholder="请输入密码" v-model="userPwd">
			</view>
			<Lines></Lines>
			<button type="default" class="btn" @tap="Login">登录</button>
		</view>
	</view>
</template>

<script>
	import Lines from '../../components/common/Lines.vue'
	import {mapMutations} from 'vuex'
	import $http from '../../common/api/request.js'
	export default {
		data() {
			return {
				userName:'15865986587',
				userPwd:'1234567',
			}
		},
		components:{
			Lines
		},
		methods: {
			...mapMutations(['login']),
			Login(){
				$http.request({
					url:"/login",
					method:"POST",
					data:{
						userName:this.userName,
						userPwd:this.userPwd
					}
				}).then((res)=>{
					// 保存用户信息
					this.login(res.data)
					if(res.success){
						uni.showToast({
							title:res.msg,
							icon:"none"
						})
						uni.hideLoading()
						uni.reLaunch({
							url:"/pages/index/index"
						})
					}
					
				}).catch(()=>{
					uni.showToast({
						title:"请求失败",
						icon:"none"
					})
				})
			}
		}
	}
</script>

<style scoped>
.main{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
input {
	height: 66rpx;
}
.account{
	width: 100%;
	padding-left: 30rpx;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
.password{
	width: 100%;
	padding-left: 30rpx;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
.btn{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 60rpx;
	color: white;
	background-color: #42B7FB;
}
</style>
